<template>
    <div>
        <div style="text-align: right;">
            <el-button style="width: 100px;height: 50px;" type="primary" @click="chooseSeekKill = {};showAddSeekKill = true">添加秒杀</el-button>
        </div>

        <div>
            <el-table :data="seekKillList" style="width: 100%;">
                <el-table-column prop="name" label="秒杀名称" show-overflow-tooltip />
                <el-table-column prop="title" label="秒杀描述" show-overflow-tooltip />
                <el-table-column prop="price" label="秒杀价格" show-overflow-tooltip />
                <el-table-column prop="stock" label="秒杀库存" show-overflow-tooltip />
                <el-table-column prop="startTime" label="秒杀开始时间" show-overflow-tooltip />
                <el-table-column prop="endTime" label="秒杀结束时间" show-overflow-tooltip />
                <el-table-column prop="action" label="操作" width="260">
                    <template #default="scope">
                        <el-button type="primary" @click="chooseSeekKill={...scope.row};showAddSeekKill=true">编辑</el-button>
                        <el-button type="danger" :disabled="buttonDisable" @click="deleteSeekKill(scope.row)">删除</el-button>
                        <el-button type="danger" @click="changStockParm={id:scope.row.id,stock:0,haveStock:scope.row.stock};showChangStock=true">修改库存</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


    <el-dialog v-model="showAddSeekKill" title="添加秒杀" width="40%">
        <el-form :model="chooseSeekKill" label-width="120px">
            <el-form-item label="秒杀名称">
                <el-input v-model="chooseSeekKill.name" placeholder="请输入秒杀名称" />
            </el-form-item>
            <el-form-item label="秒杀描述">
                <el-input type="textarea" rows="6" v-model="chooseSeekKill.title" placeholder="请输入秒杀描述" />
            </el-form-item>
            <el-form-item label="秒杀价格">
                <el-input-number precision="2" v-model="chooseSeekKill.price" min="0" max="3000000" />
            </el-form-item>
            <el-form-item label="秒杀库存">
                <el-input type="number" min="0" max="3000000" v-if="!chooseSeekKill.id"  v-model="chooseSeekKill.stock" placeholder="请输入秒杀库存" />
                <span v-else>{{chooseSeekKill.stock}}</span>
            </el-form-item>
            <el-form-item label="秒杀开始时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="chooseSeekKill.startTime" type="datetime" placeholder="请选择秒杀开始时间" />
            </el-form-item>
            <el-form-item label="秒杀结束时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="chooseSeekKill.endTime" type="datetime" placeholder="请选择秒杀结束时间" />
            </el-form-item>
            <el-form-item label="会员时长">
                <el-input type="number" min="0" max="30000" v-model="chooseSeekKill.validity" placeholder="请输入会员时长" />
            </el-form-item>
        </el-form>
        <div style="text-align: center;"><el-button type="primary" :disabled="buttonDisable" @click="addSeekKill">保存</el-button></div>
    </el-dialog>

    <el-dialog v-model="showChangStock" title="修改库存" width="50%">
        <div style="text-align: center;">
            <h2>注意！！是增加或删除量，而不是设置库存</h2>
            <h2>库存更新有延迟，如在秒杀时删减库存，可能出现负库存</h2>
            <h3>请确保您能足够的突发应对库存，否则在秒杀时不要减库存，而是直接下架</h3>
            <h3>秒杀前或者增加库存不受影响</h3>
            增量：<el-input-number v-model="changStockParm.stock" :min="-changStockParm.haveStock" max="3000000" />
            <div style="margin-top: 30px;"><el-button :disabled="buttonDisable" type="primary" @click="changStock">保存</el-button></div>
        </div>
    </el-dialog>
</template>


<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import request from '@/base/request'
    import SeekKill from '@/types/vip/SeckKill'
    const showAddSeekKill = ref(false)
    const showChangStock = ref(false)
    const chooseSeekKill = ref<SeekKill>()
    const seekKillList = ref<SeekKill[]>([])
    const buttonDisable=ref(false)
    const changStockParm = ref({
        id:-1,
        stock:0,
        haveStock:0
    })


    const changStock = async () =>{
        buttonDisable.value=true;
        try{
            const response = (await request.put("/trade/seckKill/changStock",changStockParm.value)).data
            if(response.code == 200){
                ElMessage.success("库存更新成功")
                getSeekKillList()
                showChangStock.value = false
            }else{
                ElMessage.error(response.message)
            }
        }finally{
            buttonDisable.value=false;
        }

    }

    const deleteSeekKill = async (row:SeekKill) =>{
        buttonDisable.value=true;
        try{
            const response = (await request.delete(`/trade/seckKill/deleteSeckKill/${row.id}`)).data
            if(response.code == 200){
                ElMessage.success("删除成功")
                getSeekKillList()
            }else{
                ElMessage.error(response.message)
            }
        }finally{
            buttonDisable.value=false;
        }

    }
    const addSeekKill = async () =>{
        buttonDisable.value=true;
        try{
            const response = (await request.post("/trade/seckKill/addSeckKill",chooseSeekKill.value)).data
            if(response.code == 200){
                ElMessage.success("成功")
                getSeekKillList()
                chooseSeekKill.value = {}
                showAddSeekKill.value = false
            }else{
                ElMessage.error(response.message)
            }
        }finally{
            buttonDisable.value = false
        }

    }

    const getSeekKillList = async () => {
        const response = (await request.get("/trade/seckKill/getSeckKillList")).data
        if(response.code == 200){
            seekKillList.value = response.data
        }else{
            ElMessage.error(response.message)
        }
    }

    onMounted(() => {
        getSeekKillList()
    })
</script>

<style scoped>


</style>
